<template>
  <div class="recharge_record_main">
    <con-title :topTitle="topTitle" />
    <el-card class="box-card">
      <div class="max">
        <div>
          <label for="time">月份选择:</label>
          <el-date-picker
            v-model="params.date"
            type="date"
            id="time"
            @change="timeChange"
            placeholder="选择月"
          >
          </el-date-picker>

          <el-table :cell-style="center" :header-cell-style="center" :data="record.data" style="width: 100%">
             <el-table-column prop="index" label="序号" width="180">
            </el-table-column>
            <el-table-column prop="id" label="充值id" width="180">
            </el-table-column>
            <el-table-column prop="cTime" label="日期" width="180">
              <template slot-scope="scope">
                {{scope.row.cTime | Time}}
              </template>
            </el-table-column>
            <el-table-column prop="amount" label="充值金额"> </el-table-column>
            <el-table-column prop="desc" label="备注"> </el-table-column>
          </el-table>
          <div class="pagination_center">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="currentChange"
        :page-sizes="[5, 10, 15]"
        :current-page="params.currPage"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="record.total"
      >
      </el-pagination>
    </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import ConTitle from "@/components/ConTitle";
import { $usageList } from "@/api/api.js";

export default {
  name: "rechargeRecord",
  components: {
    ConTitle,
  },
  data() {
    return {
      topTitle: {
        type: "计费",
        text: "使用记录",
        msg: "统计当前账户每天消耗的消息额度总数，可查看历史月份的使用记录。",
      },
      params: {
        pageSize: 5,
        currPage: 1,
        date: "",
      },
      center:{'text-align':'center'},
      record: {},
    };
  },
  filters: {
    Time(val) {
      let date = new Date(val);
      let year = date.getFullYear();
      let month = fillZero(date.getMonth() + 1);
      let day = fillZero(date.getDate());
      let h = fillZero(date.getHours());
      let m = fillZero(date.getMinutes());
      let s = fillZero(date.getSeconds());
      function fillZero(v) {
        return v < 10 ? "0" + v : v;
      }
      return `${year}-${month}-${day} ${h}:${m}:${s}`;
    },
  },
  created() {
    this.getRecord();
  },
  methods: {
    timeChange(){
      this.params.date = new Date(this.params.date).getTime();
      this.getRecord();
    },

    handleSizeChange(index){
      this.params.pageSize = index;
      this.params.currPage = 1;
      this.getRecord();
    },

    currentChange(index){
      this.params.currPage = index;
      this.getRecord();
    },

    getRecord() {
      $usageList(this.params).then((res) => {
        console.log("使用记录:", res);
        res.data.data = res.data.data.map((el,index)=>{
          el.index = index+1+(this.params.currPage-1)*this.params.pageSize;
          return el;
        })
        this.record = res.data;
      });
    },
  },
};
</script>

<style scoped lang="scss">
.recharge_record_main::-webkit-scrollbar {
  display: none;
}
.recharge_record_main {
  width: 100%;
  overflow-y: scroll;
  height: 100%;

  .max {
    width: 100%;
    height: 100%;
  }

  .box-card {
    margin-top: 10px;
  }

  .pagination_center {
    text-align: center;
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
  }
}
</style>